import React, { PureComponent } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Table, Divider, Popconfirm } from 'antd';

import Form from './components/SearchForm';
import Upload from './components/Upload';

export interface Props {
  dispatch?: Function,
  children?: React.ReactNode,
  loading?: boolean,
  buttons?: Array<any>,
  list?: {
    data: Array<any>,
    dataCnt: number
  },
  temple?: any;
  show?: boolean;
  cond?: {
    pageSize: number,
  }
}

@connect(({ archives_point, loading, menu }) => ({
  buttons: menu.buttons,
  cond: archives_point.cond || {},
  list: archives_point.list || {},
  temple: archives_point.temple,
  show: archives_point.show,
  loading: loading.effects['archives_point/queryPage']
}))
class Device extends PureComponent<Props, any> {
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }
  state = {
    current: 1
  };

  queryData(params) {
    const { dispatch } = this.props;

    dispatch({
      type: 'archives_point/queryPage',
      payload: params,
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: `archives_point/initCond` })
  }

  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    this.setState({ current: 1 }, () => {
      dispatch({
        type: 'archives_point/updateCond',
        payload: cond
      })
    })
  }

  remove = (id: string) => {
    const { dispatch } = this.props;
    this.setState({
      current: 1
    }, () => {
      dispatch({
        type: 'archives_point/remove',
        payload: id
      })
    })
  }

  render() {
    const { buttons, list } = this.props;
    const { data = {}, dataCnt } = list;
    const btnList = {};
    buttons.forEach(item => {
      btnList[item.name] = item.name
    });
    
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: index,
      ind: index + 1 < 10 ? `0${index + 1}` : index + 1,
      ...item,
      position: `${item.buildName}/${item.floorName}`
    })
    ) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      current: this.state.current,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({
          current,
          isChangePage: true
        }, () => this.queryData({
          pageNum: current
        }));
      },
    };
    const columns = [{
      title: '消防重点部位名称',
      dataIndex: 'name'
    }, {
      title: '所在位置',
      dataIndex: 'position',
    }, {
      title: '重点部位类型',
      dataIndex: 'fireDeviceTypeName'
    }, {
      title: '使用性质',
      dataIndex: 'areaName'
    }, {
      title: '负责人',
      dataIndex: 'dutyName'
    }, {
      title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{ display: 'flex' }}>
            <>
              <Link to={`/data/archives_point/${record.id}/update`}>编辑</Link>
              <Divider type="vertical" />
            </>
            <Popconfirm title= "请确认是否删除?" onConfirm={() => this.remove(record.id)} okText="确定" cancelText="取消">
              <a>删除</a>
            </Popconfirm>
          </div>
        )
      }
    }];
    return (
      <div>
        <Form current={this.state.current} initCurrent={this.initCurrent} />
        <Table
          columns={[{
            title: '序号',
            dataIndex: 'ind',
          }, ...columns]}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
        />
        <Upload show={this.props.show} temple={this.props.temple}/>
      </div>
    );
  }
}

export default Device;
